<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";
import message from "@/utils/message";

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const companyId = ref("");
const activeName = ref("companyIntro");
const isCollected = ref(false);

// 公司详情数据
const companyDetail = reactive({
    id: "1",
    name: "小米",
    logo: "https://img.bosszhipin.com/beijin/mcs/banner/71f4ee09b9a2abfb675b5c705fc46c9dcfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0",
    industry: "互联网",
    size: "10000人以上",
    funding: "已上市",
    location: "北京",
    url: "https://www.mi.com",
    address: "北京市海淀区清河中街68号小米科技园",
    coordinates: [116.352152, 40.007269],
    rating: "7065",
    followNum: "1865",
    tags: ["技术驱动", "领导行业", "全球化视野", "创新前沿"],
    description: `小米公司正式成立于2010年4月，是一家以手机、智能硬件和IoT平台为核心的互联网公司。小米是全球第四大手机制造商，目前小米在全球80多个国家和地区开展业务，拥有众多优秀的生态链企业。小米坚持做"感动人心、价格厚道"的好产品，让全球每个人都能享受科技带来的美好生活。`,
    workEnv: [
        "https://img.bosszhipin.com/beijin/upload/com/img/20211209/f1ad6e49b83d737b13bb47f8ff102d27b2534dafe622e52f81e7bf7f30542db58b2e51ec597d63b9.jpeg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50",
        "https://img.bosszhipin.com/beijin/upload/com/img/20211209/f1ad6e49b83d737b02a55ee1e97220f2a8018c7c4fecb4f281e7bf7f30542db58b2e51ec597d63b9.jpeg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50",
        "https://img.bosszhipin.com/beijin/upload/com/workfeel/20211221/7bf6f160950405e98019953855086cccb6f0102c1b8695cf4cdbbe47f181e6eac1a9a0a6ff156ac0.jpg?x-oss-process=image/resize,p_50",
        "https://img.bosszhipin.com/beijin/upload/com/img/20211003/f1ad6e49b83d737bc38767e17b253e1c8611758fa1be7d4beede784b910048c2dbc6b4555040a2be.jpeg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50",
    ],
    products: [
        {
            name: "小米商城",
            icon: "https://img.bosszhipin.com/beijin/upload/com/app/20200530/889015c97b1062c04ab63f7fb2ffdb861e1b3df98ed249a23c9acb70719fad0c.jpg?x-oss-process=image/resize,w_100,limit_0",
            desc: "让每个人都能享受科技带来的美好生活",
        },
        {
            name: "HyperOS系统",
            icon: "https://img.bosszhipin.com/beijin/upload/com/app/20200531/e5141ce5447b069560e6ad90fe505e8f1e1b3df98ed249a23c9acb70719fad0c.jpg?x-oss-process=image/resize,w_100,limit_0",
            desc: "金凡！！！！！！！",
        },
        {
            name: "小米生态链",
            icon: "https://img.bosszhipin.com/beijin/upload/com/manager/20200531/3977ad739f3152421991251d77a7bb151e1b3df98ed249a23c9acb70719fad0c.jpg?x-oss-process=image/resize,w_100,limit_0",
            desc: "Are you OK?",
        },
    ],
    jobs: [
        {
            id: "j1",
            title: "前端开发工程师（高级）",
            salary: "25-35K·15薪",
            location: "北京",
            education: "本科",
            experience: "3-5年",
            publishDate: "2024-05-10",
        },
        {
            id: "j2",
            title: "Java开发工程师",
            salary: "20-30K·15薪",
            location: "北京",
            education: "本科",
            experience: "1-3年",
            publishDate: "2024-05-09",
        },
        {
            id: "j3",
            title: "产品经理",
            salary: "20-35K·15薪",
            location: "北京",
            education: "本科",
            experience: "3-5年",
            publishDate: "2024-05-08",
        },
        {
            id: "j4",
            title: "iOS开发工程师",
            salary: "20-40K·15薪",
            location: "北京",
            education: "本科",
            experience: "1-3年",
            publishDate: "2024-05-07",
        },
        {
            id: "j5",
            title: "Android开发工程师（高级）",
            salary: "25-45K·15薪",
            location: "北京",
            education: "本科",
            experience: "3-5年",
            publishDate: "2024-05-06",
        },
    ],
    companyInfo: [
        { label: "公司全称", value: "北京小米科技有限责任公司" },
        { label: "法定代表人", value: "雷军" },
        { label: "注册资本", value: "148800万人民币" },
        { label: "成立时间", value: "2012-05-08" },
        { label: "企业类型", value: "有限责任公司" },
        { label: "统一社会信用代码", value: "91110108596084056A" },
        { label: "注册地址", value: "北京市海淀区清河中街68号院2号楼-2" },
        {
            label: "经营范围",
            value: "基础软件服务、应用软件服务；技术开发、技术咨询、技术服务、技术转让、技术培训；计算机系统服务；设计、制作、代理、发布广告；承办展览展示活动；市场调查；货物进出口、技术进出口、代理进出口；销售电子产品、通讯设备、计算机、软件及辅助设备、电气化教学设备。（市场主体依法自主选择经营项目，开展经营活动；依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动；不得从事国家和本市产业政策禁止和限制类项目的经营活动。）",
        },
    ],
    hrInfo: {
        name: "王先生",
        position: "招聘经理",
        activeTime: "刚刚活跃",
    },
});

// 处理收藏
const toggleCollect = () => {
    isCollected.value = !isCollected.value;
    ElMessage({
        message: isCollected.value ? "已收藏" : "已取消收藏",
        type: "success",
    });
};

// 查看职位详情
const viewJobDetail = (id: string) => {
    router.push({
        path: "/jobInfo",
        query: { id },
    });
};

// 发送消息
const sendMessage = () => {
    ELMessage({
        message: "消息功能暂未开放",
        type: "info",
    });
};

onMounted(() => {
    // 从路由获取公司ID
    companyId.value = (route.query.id as string) || "1";

    // 这里应该使用实际API获取公司详情，现在使用模拟数据
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 500);
});
</script>

<template>
    <div class="scroll_main">
        <div class="page-container">
            <headerIndex />

            <el-container>
                <el-main class="main-container">
                    <el-skeleton :loading="loading" animated :rows="10" v-if="loading" />

                    <template v-else>
                        <!-- 面包屑导航 -->
                        <div class="breadcrumb-container">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item :to="{ path: '/job' }">公司</el-breadcrumb-item>
                                <el-breadcrumb-item>公司详情</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>

                        <!-- 公司基本信息 -->
                        <el-card class="company-header">
                            <div class="company-info">
                                <div class="left">
                                    <div class="avatar-container">
                                        <el-avatar :size="80" :src="companyDetail.logo" />
                                        <el-tag class="verified-tag" type="success" effect="plain" size="small"
                                            >认证</el-tag
                                        >
                                    </div>
                                    <div class="basic-info">
                                        <div class="company-name-row">
                                            <h1>{{ companyDetail.name }}</h1>
                                            <el-button
                                                :icon="Star"
                                                circle
                                                @click="toggleCollect"
                                                :class="{ active: isCollected }"
                                            ></el-button>
                                        </div>
                                        <div class="stats-row">
                                            <div class="rating">
                                                <span class="label">综合评分: </span>
                                                <span class="value">{{ companyDetail.rating }}</span>
                                                <span class="unit">(分数指数)</span>
                                            </div>
                                            <div class="divider"></div>
                                            <div class="follows">
                                                <span class="value">{{ companyDetail.followNum }}</span>
                                                <span class="unit">(关注人数)</span>
                                            </div>
                                        </div>
                                        <div class="meta-row">
                                            <span>{{ companyDetail.industry }}</span>
                                            <span class="divider">|</span>
                                            <span>{{ companyDetail.size }}</span>
                                            <span class="divider">|</span>
                                            <span>{{ companyDetail.funding }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>

                        <!-- 主体内容 -->
                        <div class="content-container">
                            <!-- 主要内容 -->
                            <el-card class="main-content">
                                <el-tabs v-model="activeName" class="demo-tabs">
                                    <el-tab-pane label="公司简介" name="companyIntro">
                                        <div class="section-title">公司简介</div>
                                        <div class="company-description">
                                            <p>{{ companyDetail.description }}</p>
                                        </div>

                                        <div class="section-title">公司环境</div>
                                        <div class="company-environment">
                                            <el-row :gutter="15">
                                                <el-col
                                                    v-for="(photo, index) in companyDetail.workEnv"
                                                    :key="index"
                                                    :xs="12"
                                                    :sm="12"
                                                    :md="6"
                                                    :lg="6"
                                                >
                                                    <div class="photo-item">
                                                        <el-image :src="photo" fit="cover" />
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>

                                        <div class="section-title">产品介绍</div>
                                        <div class="product-list">
                                            <el-row :gutter="20">
                                                <el-col
                                                    v-for="(product, index) in companyDetail.products"
                                                    :key="index"
                                                    :xs="24"
                                                    :sm="24"
                                                    :md="8"
                                                    :lg="8"
                                                >
                                                    <div class="product-item">
                                                        <div class="product-icon">
                                                            <el-image :src="product.icon" fit="cover" />
                                                        </div>
                                                        <div class="product-info">
                                                            <h4>{{ product.name }}</h4>
                                                            <p>{{ product.desc }}</p>
                                                        </div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>

                                        <div class="section-title">工商信息</div>
                                        <div class="company-business">
                                            <el-descriptions :column="1" border>
                                                <el-descriptions-item
                                                    v-for="(item, index) in companyDetail.companyInfo"
                                                    :key="index"
                                                    :label="item.label"
                                                >
                                                    {{ item.value }}
                                                </el-descriptions-item>
                                            </el-descriptions>
                                        </div>

                                        <div class="section-title">公司地址</div>
                                        <div class="company-location">
                                            <div class="address">
                                                <el-icon><LocationFilled /></el-icon>
                                                <span>{{ companyDetail.address }}</span>
                                            </div>
                                            <div class="map-container">
                                                <el-image
                                                    src="https://via.placeholder.com/800x300?text=公司地址地图"
                                                    fit="cover"
                                                />
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="招聘职位" name="jobs">
                                        <div class="section-title">在招职位</div>
                                        <div class="job-list">
                                            <el-table :data="companyDetail.jobs" style="width: 100%">
                                                <el-table-column prop="title" label="职位名称" min-width="180">
                                                    <template #default="scope">
                                                        <div class="job-title" @click="viewJobDetail(scope.row.id)">
                                                            {{ scope.row.title }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="salary" label="薪资" min-width="120">
                                                    <template #default="scope">
                                                        <span class="salary">{{ scope.row.salary }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column
                                                    prop="location"
                                                    label="地点"
                                                    min-width="100"
                                                ></el-table-column>
                                                <el-table-column
                                                    prop="experience"
                                                    label="经验"
                                                    min-width="100"
                                                ></el-table-column>
                                                <el-table-column
                                                    prop="education"
                                                    label="学历"
                                                    min-width="100"
                                                ></el-table-column>
                                                <el-table-column
                                                    prop="publishDate"
                                                    label="发布时间"
                                                    min-width="120"
                                                ></el-table-column>
                                                <el-table-column min-width="100">
                                                    <template #default="scope">
                                                        <el-button
                                                            type="primary"
                                                            size="small"
                                                            @click="viewJobDetail(scope.row.id)"
                                                        >
                                                            查看
                                                        </el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-card>

                            <!-- 右侧边栏 -->
                            <div class="sidebar">
                                <!-- HR信息卡片 -->
                                <el-card class="hr-card">
                                    <div class="hr-header">
                                        <div class="hr-title">招聘者信息</div>
                                    </div>
                                    <div class="hr-content">
                                        <div class="hr-info">
                                            <el-avatar :size="50" src="https://via.placeholder.com/50" />
                                            <div class="hr-detail">
                                                <div class="hr-name">{{ companyDetail.hrInfo.name }}</div>
                                                <div class="hr-position">{{ companyDetail.hrInfo.position }}</div>
                                            </div>
                                        </div>
                                        <div class="hr-active-time">{{ companyDetail.hrInfo.activeTime }}</div>
                                        <el-button type="primary" class="message-btn" @click="sendMessage">
                                            <el-icon><Message /></el-icon> 立即沟通
                                        </el-button>
                                    </div>
                                </el-card>

                                <!-- 工作信息卡片 -->
                                <el-card class="company-contact-card">
                                    <template #header>
                                        <div class="card-header">
                                            <span>工作信息</span>
                                        </div>
                                    </template>
                                    <div class="contact-item">
                                        <div class="label">公司规模</div>
                                        <div class="value">{{ companyDetail.size }}</div>
                                    </div>
                                    <div class="contact-item">
                                        <div class="label">所属行业</div>
                                        <div class="value">{{ companyDetail.industry }}</div>
                                    </div>
                                    <div class="contact-item">
                                        <div class="label">融资阶段</div>
                                        <div class="value">{{ companyDetail.funding }}</div>
                                    </div>
                                    <div class="contact-item">
                                        <div class="label">工作地点</div>
                                        <div class="value">{{ companyDetail.location }}</div>
                                    </div>
                                    <div class="contact-item">
                                        <div class="label">公司官网</div>
                                        <div class="value">
                                            <a :href="companyDetail.url" target="_blank">{{ companyDetail.url }}</a>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </template>
                </el-main>
            </el-container>

            <footerIndex />
        </div>
        <el-backtop :bottom="80" target=".scroll_main" />
    </div>
</template>

<style scoped lang="less">
/* 页面容器样式 */
.page-container {
    width: 100%;
    overflow-x: hidden;
}

/* 主内容区样式 */
.main-container {
    background-color: #ffffff;
    --el-main-padding: 0;
    padding-top: 70px; /* 为固定导航留出空间 */
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

.company-detail-page {
    background-color: #f5f7fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.breadcrumb-container {
    margin-bottom: 15px;
    padding: 10px 0;
}

.company-header {
    margin-bottom: 20px;

    .company-info {
        .left {
            display: flex;
            align-items: center;

            .avatar-container {
                position: relative;
                margin-right: 20px;

                .verified-tag {
                    position: absolute;
                    bottom: -5px;
                    right: -5px;
                    border-radius: 4px;
                }
            }

            .basic-info {
                flex: 1;

                .company-name-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;

                    h1 {
                        font-size: 22px;
                        font-weight: 600;
                        margin: 0;
                    }

                    .el-button.active {
                        color: #ff9800;
                    }
                }

                .stats-row {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;

                    .rating,
                    .follows {
                        display: flex;
                        align-items: center;

                        .label {
                            color: #606266;
                            font-size: 14px;
                        }

                        .value {
                            color: #ff6b6b;
                            font-weight: 600;
                            font-size: 16px;
                            margin: 0 5px;
                        }

                        .unit {
                            color: #909399;
                            font-size: 12px;
                        }
                    }

                    .divider {
                        width: 1px;
                        height: 14px;
                        background-color: #dcdfe6;
                        margin: 0 15px;
                    }
                }

                .meta-row {
                    color: #606266;
                    font-size: 14px;

                    .divider {
                        margin: 0 10px;
                        color: #dcdfe6;
                    }
                }
            }
        }
    }
}

.content-container {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;

    .main-content {
        flex: 1;

        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin: 20px 0 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;

            &:first-child {
                margin-top: 0;
            }
        }

        .company-description {
            color: #303133;
            line-height: 1.8;
        }

        .company-environment {
            margin-bottom: 20px;

            .photo-item {
                height: 150px;
                margin-bottom: 15px;
                border-radius: 8px;
                overflow: hidden;

                .el-image {
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                }
            }
        }

        .product-list {
            .product-item {
                display: flex;
                margin-bottom: 20px;
                padding: 15px;
                border: 1px solid #ebeef5;
                border-radius: 4px;

                .product-icon {
                    flex: 0 0 80px;
                    height: 80px;
                    margin-right: 15px;
                    border-radius: 8px;
                    overflow: hidden;

                    .el-image {
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                        object-fit: contain;
                    }
                }

                .product-info {
                    flex: 1;

                    h4 {
                        margin: 0 0 10px 0;
                        font-size: 16px;
                    }

                    p {
                        margin: 0;
                        color: #606266;
                        font-size: 14px;
                        line-height: 1.6;
                    }
                }
            }
        }

        .company-location {
            .address {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                color: #303133;

                .el-icon {
                    color: #409eff;
                    margin-right: 8px;
                    font-size: 16px;
                }
            }

            .map-container {
                width: 100%;
                height: 300px;
                border-radius: 4px;
                overflow: hidden;
            }
        }

        .job-list {
            .job-title {
                color: #409eff;
                cursor: pointer;
                font-weight: 500;

                &:hover {
                    text-decoration: underline;
                }
            }

            .salary {
                color: #ff6b6b;
                font-weight: 500;
            }
        }
    }

    .sidebar {
        width: 300px;
        flex-shrink: 0;

        .hr-card {
            margin-bottom: 20px;

            .hr-header {
                margin-bottom: 15px;

                .hr-title {
                    font-weight: 600;
                    font-size: 16px;
                }
            }

            .hr-content {
                .hr-info {
                    display: flex;
                    align-items: center;
                    margin-bottom: 15px;

                    .hr-detail {
                        margin-left: 15px;

                        .hr-name {
                            font-weight: 500;
                            margin-bottom: 5px;
                        }

                        .hr-position {
                            font-size: 13px;
                            color: #606266;
                        }
                    }
                }

                .hr-active-time {
                    margin-bottom: 15px;
                    color: #409eff;
                    font-size: 13px;
                }

                .message-btn {
                    width: 100%;
                    margin-top: 5px;
                }
            }
        }

        .company-contact-card {
            .card-header {
                font-weight: 600;
                font-size: 16px;
            }

            .contact-item {
                display: flex;
                margin-bottom: 12px;
                padding-bottom: 12px;
                border-bottom: 1px dashed #ebeef5;

                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 0;
                    border-bottom: none;
                }

                .label {
                    color: #909399;
                    width: 80px;
                    flex-shrink: 0;
                }

                .value {
                    color: #303133;
                    flex: 1;

                    a {
                        color: #409eff;
                        text-decoration: none;

                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}

// 响应式布局优化
@media screen and (max-width: 992px) {
    .content-container {
        flex-direction: column;

        .sidebar {
            width: 100%;
        }
    }
}

@media screen and (max-width: 768px) {
    .company-header {
        .company-info {
            .left {
                flex-direction: column;
                align-items: flex-start;

                .avatar-container {
                    margin-right: 0;
                    margin-bottom: 15px;
                }

                .basic-info {
                    width: 100%;

                    .company-name-row {
                        h1 {
                            font-size: 20px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 576px) {
    .content-container {
        .main-content {
            .product-list {
                .product-item {
                    flex-direction: column;

                    .product-icon {
                        margin: 0 0 10px 0;
                    }
                }
            }
        }
    }
}
</style>
